<script>
import {getApplyData} from "./js/rentalCheckDetailJs";

export default {
  name: "CheckDetail",
  props: ["hrUuid"],
  data() {
    return {
      house: {
        houseName: '',
        houseType: '',
        houseArea: '',
        houseAddress: '',
        picture: ''
      },
      user: {
        userName: '',
        userType: '',
        phone: '',
        identity: ''
      },
      applyData: {
        applyTime: '',
        applyReason: '',
        handleTime: '',
        handleResult: ''
      }
    }
  },
  mounted() {
    // 获取申请信息
    this.getApplyMessage(this.hrUuid);
  },
  methods: {
    // 获取数据
    getApplyMessage(id) {
      const _this = this;
      getApplyData(id).then(res => {
        if (res.code === '200') {
          _this.house = res.data;
          _this.user = res.data;
          _this.applyData = res.data;
        } else {
          _this.$message.error(res.msg);
        }
      }).catch(error => {
        console.log('系统出错了', error);
      })
    },
    // 关闭弹窗
    closeDialog() {
      this.$emit('closeDialog');
    }
  }
}
</script>

<template>
  <div id="rcd-main-container" class="rcd-main-container">
    <p>租房申请详情</p>
    <i class="el-icon-circle-close" @click="closeDialog"></i>
    <div id="rcd-description-container" class="rcd-description-container">
      <div id="rcd-house-list" class="rcd-list">
        <span>房屋信息</span>
        <el-descriptions :column="3" border>
          <el-descriptions-item label="房屋名称">{{ house.houseName }}</el-descriptions-item>
          <el-descriptions-item label="面积">{{ house.houseArea }}平方米</el-descriptions-item>
          <el-descriptions-item label="户型">{{ house.houseType }}</el-descriptions-item>
          <el-descriptions-item label="地址" :span="2">{{ house.houseAddress }}</el-descriptions-item>
          <el-descriptions-item label="图片">
            <img :src="house.picture" style="max-width: 125px; max-height: 125px;">
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div id="rcd-user-list" class="rcd-list">
        <span>用户信息</span>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="用户姓名">{{ user.userName }}</el-descriptions-item>
          <el-descriptions-item label="用户类型">{{ user.userType }}</el-descriptions-item>
          <el-descriptions-item label="联系电话">{{ user.phone }}</el-descriptions-item>
          <el-descriptions-item label="身份证号">{{ user.identity }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <div id="rcd-apply-list" class="rcd-list">
        <span>申请信息</span>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="申请理由">{{ applyData.applyReason }}</el-descriptions-item>
          <el-descriptions-item label="申请时间">{{ applyData.applyTime }}</el-descriptions-item>
          <el-descriptions-item label="处理结果">{{ applyData.handleResult }}</el-descriptions-item>
          <el-descriptions-item label="处理时间">{{ applyData.handleTime }}</el-descriptions-item>
        </el-descriptions>
      </div>

    </div>
  </div>
</template>

<style scoped>
@import "rentalCheckDetailCss.css";
</style>
